<template>
  <div>
    <div class="topSearch">
      <img src="../img/搜索，猫客.png" alt="" />
      <input  class="inputs"
        @input.Stop="dateSearch"
        @keyup.enter.Stop="searchValue(textValues)"
        type="text"
        placeholder="搜索歌曲、歌手、专辑"
        v-model="textValues"
        ref="inputTetx"
      />
      <span
        class="clearList"
        @click="(isShow = false), (textValues = ''), (isShowSearch = false)"
        >×</span
      >
    </div>
    <div class="bgSolid"></div>
    <div v-show="!isShow" v-if="!isShowSearch">
      <div class="hotSearch">热门搜索</div>
      <div class="hotList">
        <HotList
          v-for="item in hotList"
          :key="item.id"
          :item="item"
          @search-value="searchValue"
        >
        </HotList>
        <HistoryList
          v-for="history in historys"
          :key="history.id"
          @search-value="searchValue"
          :history="history"
          @dele-history="deleteHistory"
        >
        </HistoryList>
      </div>
    </div>
    <div v-if="isShowSearch">
      <div>搜索{{ textValues }}</div>
      <RealTimeSearch
        v-for="item in realTimeSearchResoule"
        :key="item.id"
        :item="item"
        @search-value="searchValue"
      >
      </RealTimeSearch>
    </div>
    <div v-show="isShow" v-if="!isShowSearch" class="searchResult">
      <SearchResult
      :isShows="songId==result.id  ? true : false"
      :paused="$attrs.paused"
        v-for="result in searchResults"
        :key="result.id"
        :result="result"
        :textValues="textValues"
        @change-musics-list="$emit('change-musics-list', $event)"
      >
      </SearchResult>
    </div>
  </div>
</template>

<script>
import HotList from "@/components/HotList.vue";
import SearchResult from "@/components/SearchResult.vue";
import HistoryList from "@/components/HistoryList.vue";
import RealTimeSearch from "@/components/RealTimeSearch.vue";
export default {
  props: {
    songId: Number,
  },
  components: {
    HotList,
    SearchResult,
    HistoryList,
    RealTimeSearch,
  },
  methods: {
    deleteHistory(id) {
      this.historys = this.historys.filter((o) => o.id !== id);
    },
    searchValue(texts) {
      this.isShow = true;
      this.isShowSearch = false;
      this.textValues = texts;
      let url = `http://localhost:3000/cloudsearch?keywords="${texts}"`;
      this.$axios.get(url).then((res) => {
        this.searchResults = res.data.result.songs;
      });
      this.$refs.inputTetx.blur();
      let isAdds = 0;
      this.historys.map((item) => {
        if (item.texts == texts) {
          isAdds += 1;
        }
      });
      console.log(isAdds);
      if (isAdds > 0) {
        return;
      } else {
        this.historys = [
          ...this.historys,
          {
            id: Date.now(),
            texts,
          },
        ];
      }
      console.log("ss", texts);
    },
    dateSearch() {
      this.isShow = false;
      this.isShowSearch = true;
      console.log(this.textValues);
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        let url = `http://localhost:3000/cloudsearch?keywords="${this.textValues}"`;
        this.$axios.get(url).then((res) => {
          console.log(res);
          this.realTimeSearchResoule = res.data.result.songs;
        });
      }, 300);
    },
  },
  data() {
    return {
      hotList: [],
      SearchLists: false,
      textValues: "",
      isShow: false,
      isShowSearch: false,
      searchResults: [],
      historys: JSON.parse(window.localStorage.getItem("historys")) || [],
      timeout: null,
      realTimeSearchResoule: [],
    };
  },
  watch: {
    historys: function (newValue) {
      window.localStorage.setItem("historys", JSON.stringify(newValue));
    },
  },
  created() {
    this.$axios.get(" http://localhost:3000/search/hot").then((res) => {
      this.hotList = res.data.result.hots;
    });
  },
};
</script>

<style lang="scss" scoped>
.topSearch {
  width: 355rem;
  margin: 0 auto;
  height: 32rem;
  background-color: rgb(238, 236, 236);
  border-radius: 15rem;
  text-align: center;
  margin-top: 15rem;
  margin-bottom: 15rem;
  border-bottom: 1rem solid rgb(238, 236, 236);
  img {
    width: 13rem;
    height: 13rem;
    position: absolute;
    margin-top: 10rem;
    margin-left: -20rem;
  }
  .inputs {
    width: 295rem;
    height: 27rem;
    border: none;
    outline: none;
    background-color: rgb(238, 236, 236);
    position: relative;
    font-size: 14rem;
  }
}
.bgSolid {
  height: 1rem;
  width: 100%;
  background-color: rgb(218, 214, 214);
}
.current{
  background: rgb(235, 13, 13);
}
.hotSearch {
  font-size: 12rem;
  margin-left: 10rem;
  margin-top: 15rem;
}
.hotList {
  display: flex;
  flex-wrap: wrap;
}
.clearList {
  font-size: 25rem;
  position: relative;
  top: 4rem;
  color: #9b9797;
}

</style>